* {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    font-family: "Poppins";
  }
  
  body {
    min-height: 100vh;
    background: #fff;
  }
  
  .navigation {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 70px;
    box-sizing: initial;
    background-color: rgb(255, 55, 55);
    border-radius: 0px;
    border-left: 5px solid rgb(255, 55, 55);
    background: rgb(255, 55, 55);
    transition: width 0.5%;
    overflow-x: hidden;
  }
  
  .navigation.active {
    width: 300px;
  }
  
  .navigation ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-left: 5px;
    padding-top: 40px;
  }
  
  .navigation ul li {
    position: relative;
    list-style: none;
    width: 100%;
    top: 50px;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
  }
  
  .navigation ul li b:nth-child(1) {
    position: absolute;
    top: -20px;
    height: 20px;
    width: 100%;
    background: white;
    display: none;
  }
  .navigation ul li b:nth-child(1)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-bottom-left-radius: 0px;
    background: rgb(255, 55, 55);
  }
  
  .navigation ul li b:nth-child(2) {
    position: absolute;
    bottom: -20px;
    height: 20px;
    width: 100%;
    background: white;
    display: none;
  }
  .navigation ul li b:nth-child(2)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-top-left-radius: 0px;
    background: rgb(255, 55, 55);
  }
  
  .navigation ul li.active b:nth-child(1),
  .navigation ul li.active b:nth-child(2) {
    display: block;
  }
  
  .navigation ul li.active {
    background: #fff;
  }
  
  .navigation ul li.active a {
    color: black;
  }
  
  .navigation ul li a {
    position: relative;
    display: block;
    width: 100%;
    display: flex;
    text-decoration: none;
    color: #fff;
  }
  
  .navigation ul li a .icon {
    position: relative;
    display: block;
    min-width: 60px;
    height: 60px;
    line-height: 70px;
    text-align: center;
  }
  
  .navigation ul li a .icon ion-icon {
    font-size: 1.5em;
  }
  
  .navigation ul li a .title {
    position: relative;
    display: block;
    padding-left: 10px;
    height: 60px;
    line-height: 60px;
    white-space: normal;
  }
  
  .toggle {
    position: fixed;
    top: 57px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgb(255, 55, 55);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
  }
  
  .toggle.active {
    background: rgb(255, 55, 55);
  }
  
  .toggle ion-icon {
    position: absolute;
    color: #fff;
    font-size: 34px;
    display: none;
  }
  
  .toggle ion-icon.open,
  .toggle.active ion-icon.close {
    display: block;
  }
  
  .toggle ion-icon.close,
  .toggle.active ion-icon.open {
    display: none;
  }
  
  #main {
    position: relative;
    margin-top: 40px;
    margin-left: 150px;
  }
  
  #daohang {
    position: fixed;
    width: 100%;
    z-index: 100;
  }
  #imgid {
    width: 50%;
    height: auto;
    border: 5px solid black;
  }
  
  body {
    position: relative;
  }
  #container1 {
    position: relative;
    width: 100%;
    background-color: rgb(255, 55, 55);
    margin-top: 20px;
  }
  .imgContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
  }
  .dianzan {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .dianzan:hover {
    color: yellow;
  }
  .like {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(./点赞.png);
    background-position: left;
    background-size: cover;
  }
  
  .like:hover {
    background-image: url(./hover.png);
  }
  
  .like2 {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(./hover.png);
    background-position: left;
    background-size: cover;
  }
  .dianzan2 {
      display: flex;
      justify-content: center;
      align-items: center;
      color: yellow;
    }

    
    body {
      min-height: 100vh;
      background: #fff;
    }
    
    .navigation {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: 70px;
      box-sizing: initial;
      background-color: rgb(255, 55, 55);
      border-radius: 0px;
      border-left: 5px solid rgb(255, 55, 55);
      background: rgb(255, 55, 55);
      transition: width 0.5%;
      overflow-x: hidden;
    }
    
    .navigation.active {
      width: 300px;
    }
    
    .navigation ul {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding-left: 5px;
      padding-top: 40px;
    }
    
    .navigation ul li {
      position: relative;
      list-style: none;
      width: 100%;
      top: 50px;
      border-top-left-radius: 30px;
      border-bottom-left-radius: 30px;
    }
    
    .navigation ul li b:nth-child(1) {
      position: absolute;
      top: -20px;
      height: 20px;
      width: 100%;
      background: white;
      display: none;
    }
    .navigation ul li b:nth-child(1)::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-bottom-left-radius: 0px;
      background: rgb(255, 55, 55);
    }
    
    .navigation ul li b:nth-child(2) {
      position: absolute;
      bottom: -20px;
      height: 20px;
      width: 100%;
      background: white;
      display: none;
    }
    .navigation ul li b:nth-child(2)::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-top-left-radius: 0px;
      background: rgb(255, 55, 55);
    }
    
    .navigation ul li.active b:nth-child(1),
    .navigation ul li.active b:nth-child(2) {
      display: block;
    }
    
    .navigation ul li.active {
      background: #fff;
    }
    
    .navigation ul li.active a {
      color: black;
    }
    
    .navigation ul li a {
      position: relative;
      display: block;
      width: 100%;
      display: flex;
      text-decoration: none;
      color: #fff;
    }
    
    .navigation ul li a .icon {
      position: relative;
      display: block;
      min-width: 60px;
      height: 60px;
      line-height: 70px;
      text-align: center;
    }
    
    .navigation ul li a .icon ion-icon {
      font-size: 1.5em;
    }
    
    .navigation ul li a .title {
      position: relative;
      display: block;
      padding-left: 10px;
      height: 60px;
      line-height: 60px;
      white-space: normal;
    }
    
    .toggle {
      position: fixed;
      top: 57px;
      right: 20px;
      width: 50px;
      height: 50px;
      background: rgb(255, 55, 55);
      border-radius: 10px;
      cursor: pointer;
      display: flex;
      justify-content: center;
    }
    
    .toggle.active {
      background: rgb(255, 55, 55);
    }
    
    .toggle ion-icon {
      position: absolute;
      color: #fff;
      font-size: 34px;
      display: none;
    }
    
    .toggle ion-icon.open,
    .toggle.active ion-icon.close {
      display: block;
    }
    
    .toggle ion-icon.close,
    .toggle.active ion-icon.open {
      display: none;
    }
    
    #main {
      position: relative;
      margin-top: 40px;
      margin-left: 150px;
    }
    
    #daohang {
      position: fixed;
      width: 100%;
      z-index: 100;
    }
    #imgid {
      width: 50%;
      height: auto;
      border: 5px solid black;
    }
    
    body {
      position: relative;
    }
    #container1 {
      position: relative;
      width: 100%;
      background-color: bisque;
      margin-top: 20px;
    }
    .imgContainer {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 100px;
    }
    .dianzan {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .dianzan:hover {
      color: yellow;
    }
    .like {
      display: inline-block;
      width: 20px;
      height: 20px;
      background-image: url(./点赞.png);
      background-position: left;
      background-size: cover;
    }
    
    .like:hover {
      background-image: url(./hover.png);
    }
    
    .like2 {
      display: inline-block;
      width: 20px;
      height: 20px;
      background-image: url(./hover.png);
      background-position: left;
      background-size: cover;
    }
    .dianzan2 {
        display: flex;
        justify-content: center;
        align-items: center;
        color: yellow;
      }
    #schedu{
      top:300px;
    }
    
    .userName{
      font-size: large;
      color: white;
      padding-right: 20px;
  }